<template>
    <div class="login-page">
        <Header headerTitle="密码登录" isShowBack />

        <form class="login-container">
            <section class="input-container">
                <input
                    type="text"
                    placeholder="请输入账号"
                    v-model.lazy="username"
                />
            </section>

            <section class="input-container">
                <input
                    :type="isShowPassword ? 'text' : 'password'"
                    placeholder="请输入密码"
                    v-model="password"
                />

                <div
                    class="button-switch"
                    :class="{ 'change-to-text': isShowPassword }"
                >
                    <div
                        class="circle-button"
                        :class="{ 'trans-to-right': isShowPassword }"
                        @click="isShowPassword = !isShowPassword"
                    ></div>
                    <span>abc</span>
                    <span>...</span>
                </div>
            </section>

            <section class="input-container captcha-code-container">
                <input
                    type="text"
                    placeholder="验证码"
                    maxlength="4"
                    v-model="codeNumber"
                />

                <div class="img-change-img">
                    <img v-show="captchaCodeImg" :src="captchaCodeImg" />
                    <div class="change-img" @click="getCaptchaCode">
                        <p>看不清</p>
                        <p>换一张</p>
                    </div>
                </div>
            </section>
        </form>

        <p class="login-tips">温馨提示：未注册过的账号，登录时将自动注册</p>
        <p class="login-tips">注册过的用户可凭账号密码登录</p>

        <div class="login-btn" @click="login">登录</div>

        <router-link to="/forget" class="to-forget">重置密码？</router-link>
    </div>
</template>

<script>
import { getCaptchas, accountLogin } from '@/api/user';
import { RECORD_USERINFO } from '@/store/mutation-types';
export default {
    created() {
        this.getCaptchaCode();
    },
    data() {
        return {
            username: '',
            password: '',
            isShowPassword: false,
            captchaCodeImg: '',
            codeNumber: ''
        };
    },
    methods: {
        async getCaptchaCode() {
            let res = await getCaptchas();
            this.captchaCodeImg = res.code;
        },
        async login() {
            const { username, password, codeNumber } = this;
            // 非空校验
            if (!username || !password || !codeNumber) {
                this.$message('请输入必填参数');
                return;
            }
            // 登录
            const res = await accountLogin(username, password, codeNumber);
            console.log('res', res);
            if (!res.user_id) {
                this.$message('请求失败');
                return;
            }
            this.$store.commit(`user/${RECORD_USERINFO}`, res);
            this.$router.go(-1);
        }
    }
};
</script>

<style lang="scss">
@import '@/assets/scss/mixin.scss';

.login-page {
    padding-top: 1.95rem;
    p,
    span,
    input {
        font-family: Helvetica Neue, Tahoma, Arial;
    }

    .change-login-way {
        @include ct;
        @include sc(0.7rem, #fff);
        right: 0.75rem;
    }

    .login-container {
        background-color: #fff;
        margin-top: 0.6rem;

        .input-container {
            display: flex;
            justify-content: space-between;
            padding: 0.6rem 0.8rem;
            border-bottom: 1px solid #f1f1f1;

            input {
                @include sc(0.7rem, #666);
            }

            button {
                @include sc(0.65rem, #fff);
                font-family: Helvetica Neue, Tahoma, Arial;
                padding: 0.28rem 0.4rem;
                border: 1px;
                border-radius: 0.15rem;
            }

            .right-phone-number {
                background-color: #4cd964;
            }

            .button-switch {
                background-color: #ccc;
                display: flex;
                justify-content: center;
                @include wh(2rem, 0.7rem);
                padding: 0 0.2rem;
                border: 1px;
                border-radius: 0.5rem;
                position: relative;

                .circle-button {
                    transition: all 0.3s;
                    position: absolute;
                    top: -0.2rem;
                    z-index: 1;
                    left: -0.3rem;
                    @include wh(1.2rem, 1.2rem);
                    box-shadow: 0 0.026667rem 0.053333rem 0 rgba(0, 0, 0, 0.1);
                    background-color: #f1f1f1;
                    border-radius: 50%;
                }

                .trans-to-right {
                    transform: translateX(1.3rem);
                }

                span {
                    @include sc(0.45rem, #fff);
                    transform: translateY(0.05rem);
                    line-height: 0.6rem;
                }

                span:nth-of-type(2) {
                    transform: translateY(-0.08rem);
                }
            }

            .change-to-text {
                background-color: #4cd964;
            }
        }

        .phone-number {
            padding: 0.3rem 0.8rem;
        }

        .captcha-code-container {
            height: 2.2rem;

            .img-change-img {
                display: flex;
                align-items: center;

                img {
                    @include wh(3.5rem, 1.5rem);
                    margin-right: 0.2rem;
                }

                .change-img {
                    display: flex;
                    flex-direction: 'column';
                    flex-wrap: wrap;
                    width: 2rem;
                    justify-content: center;

                    p {
                        @include sc(0.55rem, #666);
                    }

                    p:nth-of-type(2) {
                        color: #3b95e9;
                        margin-top: 0.2rem;
                    }
                }
            }
        }
    }

    .login-tips {
        @include sc(0.5rem, red);
        padding: 0.4rem 0.6rem;
        line-height: 0.5rem;
        a {
            color: #3b95e9;
        }
    }

    .to-forget {
        float: right;
        @include sc(0.6rem, #3b95e9);
        margin-right: 0.3rem;
    }

    .login-btn {
        margin: 0 0.5rem 1rem;
        @include sc(0.7rem, #fff);
        background-color: #4cd964;
        padding: 0.5rem 0;
        border: 1px;
        border-radius: 0.15rem;
        text-align: center;
    }
}
</style>
